// ignore_for_file: must_be_immutable

import 'package:flutter/material.dart';
import './data.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text('这是列表页面')),
      body: const MyText(),
    ),
  ));
}

// 设置文本的padding 用container元素设置padding值
class MyText1 extends StatelessWidget {
  const MyText1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      child: const Text('我是flutter'),
    );
  }
}

// Padding比container组件性能好，因为属性少
class MyText2 extends StatelessWidget {
  const MyText2({super.key});

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(20),
      child: Text('我是flutter'),
    );
  }
}

// Row为横着排列，有点像flex
class MyText3 extends StatelessWidget {
  const MyText3({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Row(
        // 有点像flex
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          RenderIcon(
            Icons.home,
            color: Colors.white,
          ),
          RenderIcon(
            Icons.home,
            color: Colors.yellow,
          ),
          RenderIcon(
            Icons.home_filled,
            color: Colors.yellow,
          )
        ],
      ),
    );
  }
}

// Column竖着排列，有点像flex
class MyText4 extends StatelessWidget {
  const MyText4({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Column(
        // 有点像flex
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          RenderIcon(
            Icons.home,
            color: Colors.white,
          ),
          RenderIcon(
            Icons.home,
            color: Colors.yellow,
          ),
          RenderIcon(
            Icons.home_filled,
            color: Colors.yellow,
          )
        ],
      ),
    );
  }
}

//  Expanded横向的flex为1
class MyText5 extends StatelessWidget {
  const MyText5({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          // child元素的宽度设置会失效
          child: RenderIcon(
            Icons.home_filled,
            color: Colors.yellow,
          ),
        ),
        RenderIcon(
          Icons.home_filled,
          color: Colors.yellow,
        )
      ],
    );
  }
}

class MyText6 extends StatelessWidget {
  const MyText6({super.key});
  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.vertical,
      children: [
        Expanded(
          flex: 1,
          // child元素的宽度设置会失效
          child: RenderIcon(
            Icons.home_filled,
            color: Colors.yellow,
          ),
        ),
        RenderIcon(
          Icons.home_filled,
          color: Colors.yellow,
        )
      ],
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({super.key});
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(children: [
          Expanded(
            flex: 1,
            // child元素的宽度设置会失效
            child: Image.network(
              'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLDEYWBo9eGlSzicLOsiaewkzPicaPtpIVtvUKekSF6icdxLRb4bBImYzcPEQFaRFVaBTFjibO5WIN9PVg/132',
              height: 100,
              fit: BoxFit.cover,
            ),
          )
        ]),
        Row(
          children: [
            Expanded(
              flex: 2,
              // child元素的宽度设置会失效
              child: Container(
                margin: const EdgeInsets.all(10),
                alignment: Alignment.center,
                color: Colors.red,
                height: 100,
                child: const Text('这是内容'),
              ),
            ),
            Expanded(
              flex: 1,
              // child元素的宽度设置会失效
              child: SizedBox(
                  // 必须要有高度才能实现区块
                  height: 100,
                  child: Column(
                    children: [
                      Expanded(
                        flex: 1,
                        // child元素的宽度设置会失效
                        child: Container(
                          margin: const EdgeInsets.all(2),
                          alignment: Alignment.center,
                          color: Colors.red,
                          child: const Text('这是内容'),
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.all(2),
                        alignment: Alignment.center,
                        color: Colors.red,
                        child: const Text('这是内容'),
                      )
                    ],
                  )),
            ),
          ],
        )
      ],
    );
  }
}

class RenderIcon extends StatelessWidget {
  Color color;
  IconData icon;
  RenderIcon(this.icon, {super.key, required this.color});
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      margin: const EdgeInsets.all(10),
      width: 50,
      height: 50,
      color: Colors.red,
      child: Icon(
        icon,
        color: color,
      ),
    );
  }
}
